import React, { Component } from 'react'
import Search from '../components/reactcomponent/Search';
import Table from '../components/reactcomponent/Table';

export default class ReactComponent extends Component {
    constructor () {
        super();
        this.state = {
            list: [
                { category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football" },
                { category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball" },
                { category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball" },
                { category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch" },
                { category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5" },
                { category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7" }
            ],
            arr: [],
        }
    }
    search = (key, stocked) => {
        let searchList = this.state.list.filter(info => (info.name.toUpperCase().indexOf(key.toUpperCase()) !== -1) && (stocked ? info.stocked === true : true))
        let categoryList = Array.from(new Set(searchList.map(item => item.category)))
        let arr = categoryList.map(item => {
            return {
                category: item,
                list: searchList.filter(info => info.category === item)
            }
        })
        this.setState({
            arr
        })
    }
    componentDidMount() {
        this.search('')
    }
    render() {
        return (
            <div>
                <Search search={this.search} ></Search>
                <Table list={this.state.arr} ></Table>
            </div>
        )
    }
}
